<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>练习袁士野</title>
    <style>
        /* 重置样式 */
        *{padding: 0;margin: 0;}
        a{text-decoration: none;}
        li{list-style: none;}

        .username{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            line-height: 200px;
            text-align: center;
            margin: 50px auto;
        }
        .center{
            color: #f00;
            font-size: 28px;
        }
        /* 行内元素(不可替换元素)不能设置宽高 */
        /* 行内元素:可替换元素(img,input)、不可替换元素(a,span,strong) */
        .box{width: 200px;}
        .box span{
            width: 200px;/*无效*/
            height: 200px;/*无效*/
            /*左右padding,margin能用，上下无效*/
            /* padding: 20px; */
            /* margin: 20px; */
            border: 1px solid #000;
            /* background-color: #ccc; */
        }
        /* 可替换元素具有盒子模型全部属性 */
        img{
            /* width: 500px;
            margin: 50px; */
        }
        input{
            width: 300px;
            height: 50px;
        }
        .banner{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="banner">
        <img src="../images/s1.jpg" alt="">
    </div>
    <img src="../images/s1.jpg" alt="">
    <input type="text">
    <div class="box">
        <span>aaaaaa</span>
        <span>aaaaaa</span>
        <span>aaaaaa</span>
        <span>aaaaaa</span>
        <span>aaaaaa</span>
    </div>


    <div class="username">
      <a> <strong>任梓溪</strong></a>
      <a>任<span class="center">梓</span>溪</a>
    </div>
</body>
</html>